doctype html
html.app(lang='en')
  head
    meta(charset='utf-8')
    |   
    title Musik | Web Application
    |   
    meta(name='description', content='app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav')
    |   
    meta(name='viewport', content='width=device-width, initial-scale=1, maximum-scale=1')
    |   
    link(rel='stylesheet', href='js/jPlayer/jplayer.flat.css', type='text/css')
    |   
    link(rel='stylesheet', href='css/bootstrap.css', type='text/css')
    |   
    link(rel='stylesheet', href='css/animate.css', type='text/css')
    |   
    link(rel='stylesheet', href='css/font-awesome.min.css', type='text/css')
    |   
    link(rel='stylesheet', href='css/simple-line-icons.css', type='text/css')
    |   
    link(rel='stylesheet', href='css/font.css', type='text/css')
    |   
    link(rel='stylesheet', href='css/app.css', type='text/css')
    //if lt IE 9
      script(src='js/ie/html5shiv.js')
      |     
      script(src='js/ie/respond.min.js')
      |     
      script(src='js/ie/excanvas.js')
  body
    section.vbox
      header.bg-white-only.header.header-md.navbar.navbar-fixed-top-xs
        .navbar-header.aside.bg-info.dk
          a.btn.btn-link.visible-xs(data-toggle='class:nav-off-screen,open', data-target='#nav,html')
            i.icon-list
          |         
          a.navbar-brand.text-lt(href='index.html')
            i.icon-earphones
            |           
            img.hide(src='images/logo.png', alt='.')
            |           
            span.hidden-nav-xs.m-l-sm Musik
          |         
          a.btn.btn-link.visible-xs(data-toggle='dropdown', data-target='.user')
            i.icon-settings
        |       
        ul.nav.navbar-nav.hidden-xs
          li
            a.text-muted(href='#nav,.navbar-header', data-toggle='class:nav-xs,nav-xs')
              i.fa.fa-indent.text
              |             
              i.fa.fa-dedent.text-active
        |       
        form.navbar-form.navbar-left.input-s-lg.m-t.m-l-n-xs.hidden-xs(role='search')
          .form-group
            .input-group
              span.input-group-btn
                button.btn.btn-sm.bg-white.btn-icon.rounded(type='submit')
                  i.fa.fa-search
              |             
              input.form-control.input-sm.no-border.rounded(type='text', placeholder='Search songs, albums...')
        |       
        .navbar-right
          ul.nav.navbar-nav.m-n.hidden-xs.nav-user.user
            li.hidden-xs
              a.dropdown-toggle.lt(href='#', data-toggle='dropdown')
                i.icon-bell
                |               
                span.badge.badge-sm.up.bg-danger.count 2
              |             
              section.dropdown-menu.aside-xl.animated.fadeInUp
                section.panel.bg-white
                  .panel-heading.b-light.bg-light
                    strong
                      | You have 
                      span.count 2
                      |  notifications
                  |                 
                  .list-group.list-group-alt
                    a.media.list-group-item(href='#')
                      span.pull-left.thumb-sm
                        img.img-circle(src='images/a0.png', alt='...')
                      |                     
                      span.media-body.block.m-b-none
                        | Use awesome animate.css
                        br
                        |                       
                        small.text-muted 10 minutes ago
                    |                   
                    a.media.list-group-item(href='#')
                      span.media-body.block.m-b-none
                        | 1.0 initial released
                        br
                        |                       
                        small.text-muted 1 hour ago
                  |                 
                  .panel-footer.text-sm
                    a.pull-right(href='#')
                      i.fa.fa-cog
                    |                   
                    a(href='#notes', data-toggle='class:show animated fadeInRight') See all the notifications
            |           
            li.dropdown
              a.dropdown-toggle.bg.clear(href='#', data-toggle='dropdown')
                span.thumb-sm.avatar.pull-right.m-t-n-sm.m-b-n-sm.m-l-sm
                  img(src='images/a0.png', alt='...')
                |               John.Smith 
                b.caret
              |             
              ul.dropdown-menu.animated.fadeInRight
                li
                  span.arrow.top
                  |                 
                  a(href='#') Settings
                |               
                li
                  a(href='profile.html') Profile
                |               
                li
                  a(href='#')
                    span.badge.bg-danger.pull-right 3
                    |                   Notifications
                |               
                li
                  a(href='docs.html') Help
                |               
                li.divider
                |               
                li
                  a(href='modal.lockme.html', data-toggle='ajaxModal') Logout
      |     
      section
        section.hbox.stretch
          // .aside
          aside#nav.bg-black.dk.aside.hidden-print
            section.vbox
              section.w-f-md.scrollable
                .slim-scroll(data-height='auto', data-disable-fade-out='true', data-distance='0', data-size='10px', data-railopacity='0.2')
                  // nav
                  nav.nav-primary.hidden-xs
                    ul.nav.bg.clearfix
                      li.hidden-nav-xs.padder.m-t.m-b-sm.text-xs.text-muted
                        | Discover
                      |                     
                      li
                        a(href='index.html')
                          i.icon-disc.icon.text-success
                          |                         
                          span.font-bold What&apos;s new
                      |                     
                      li
                        a(href='genres.html')
                          i.icon-music-tone-alt.icon.text-info
                          |                         
                          span.font-bold Genres
                      |                     
                      li
                        a(href='events.html')
                          i.icon-drawer.icon.text-primary-lter
                          |                         
                          b.badge.bg-primary.pull-right 6
                          |                         
                          span.font-bold Events
                      |                     
                      li
                        a(href='listen.html')
                          i.icon-list.icon.text-info-dker
                          |                         
                          span.font-bold Listen
                      |                     
                      li
                        a(href='video.html', data-target='#content', data-el='#bjax-el', data-replace='true')
                          i.icon-social-youtube.icon.text-primary
                          |                         
                          span.font-bold Video
                      |                     
                      li.m-b.hidden-nav-xs
                    |                   
                    ul.nav(data-ride='collapse')
                      li.hidden-nav-xs.padder.m-t.m-b-sm.text-xs.text-muted
                        | Interface
                      |                     
                      li
                        a.auto(href='#')
                          span.pull-right.text-muted
                            i.fa.fa-angle-left.text
                            |                           
                            i.fa.fa-angle-down.text-active
                          |                         
                          i.icon-screen-desktop.icon
                          |                         
                          span Layouts
                        |                       
                        ul.nav.dk.text-sm
                          li
                            a.auto(href='layout-color.html')
                              i.fa.fa-angle-right.text-xs
                              |                             
                              span Color option
                          |                         
                          li
                            a.auto(href='layout-boxed.html')
                              i.fa.fa-angle-right.text-xs
                              |                             
                              span Boxed layout
                          |                         
                          li
                            a.auto(href='layout-fluid.html')
                              i.fa.fa-angle-right.text-xs
                              |                             
                              span Fluid layout
                      |                     
                      li
                        a.auto(href='#')
                          span.pull-right.text-muted
                            i.fa.fa-angle-left.text
                            |                           
                            i.fa.fa-angle-down.text-active
                          |                         
                          i.icon-chemistry.icon
                          |                         
                          span UI Kit
                        |                       
                        ul.nav.dk.text-sm
                          li
                            a.auto(href='buttons.html')
                              i.fa.fa-angle-right.text-xs
                              |                             
                              span Buttons
                          |                         
                          li
                            a.auto(href='icons.html')
                              b.badge.bg-info.pull-right 369
                              |                                                         
                              |                             
                              i.fa.fa-angle-right.text-xs
                              |                             
                              span Icons
                          li
                            a.auto(href='http://www.weidea.net')
                              b.badge.bg-info.pull-right 369
                              |                                                         
                              |                             
                              i.fa.fa-angle-right.text-xs
                              |                             
                              span More
                          |                         
                          li
                            a.auto(href='grid.html')
                              i.fa.fa-angle-right.text-xs
                              |                             
                              span Grid
                          |                         
                          li
                            a.auto(href='widgets.html')
                              b.badge.bg-dark.pull-right 8
                              |                                                         
                              |                             
                              i.fa.fa-angle-right.text-xs
                              |                             
                              span Widgets
                          |                         
                          li
                            a.auto(href='components.html')
                              i.fa.fa-angle-right.text-xs
                              |                             
                              span Components
                          |                         
                          li
                            a.auto(href='list.html')
                              i.fa.fa-angle-right.text-xs
                              |                             
                              span List group
                          |                         
                          li
                            a.auto(href='#table')
                              span.pull-right.text-muted
                                i.fa.fa-angle-left.text
                                |                               
                                i.fa.fa-angle-down.text-active
                              |                             
                              |                             
                              i.fa.fa-angle-right.text-xs
                              |                             
                              span Table
                            |                           
                            ul.nav.dker
                              li
                                a(href='table-static.html')
                                  i.fa.fa-angle-right
                                  |                                 
                                  span Table static
                              |                             
                              li
                                a(href='table-datatable.html')
                                  i.fa.fa-angle-right
                                  |                                 
                                  span Datatable
                          |                         
                          li
                            a.auto(href='#form')
                              span.pull-right.text-muted
                                i.fa.fa-angle-left.text
                                |                               
                                i.fa.fa-angle-down.text-active
                              |                             
                              |                             
                              i.fa.fa-angle-right.text-xs
                              |                             
                              span Form
                            |                           
                            ul.nav.dker
                              li
                                a(href='form-elements.html')
                                  i.fa.fa-angle-right
                                  |                                 
                                  span Form elements
                              |                             
                              li
                                a(href='form-validation.html')
                                  i.fa.fa-angle-right
                                  |                                 
                                  span Form validation
                              |                             
                              li
                                a(href='form-wizard.html')
                                  i.fa.fa-angle-right
                                  |                                 
                                  span Form wizard
                          |                         
                          li
                            a.auto(href='chart.html')
                              i.fa.fa-angle-right.text-xs
                              |                             
                              span Chart
                          |                         
                          li
                            a.auto(href='portlet.html')
                              i.fa.fa-angle-right.text-xs
                              |                             
                              span Portlet
                          |                         
                          li
                            a.auto(href='timeline.html')
                              i.fa.fa-angle-right.text-xs
                              |                             
                              span Timeline
                      |                     
                      li.active
                        a.auto(href='#')
                          span.pull-right.text-muted
                            i.fa.fa-angle-left.text
                            |                           
                            i.fa.fa-angle-down.text-active
                          |                         
                          i.icon-grid.icon
                          |                         
                          span Pages
                        |                       
                        ul.nav.dk.text-sm
                          li.active
                            a.auto(href='profile.html')
                              i.fa.fa-angle-right.text-xs
                              |                             
                              span Profile
                          |                         
                          li
                            a.auto(href='blog.html')
                              i.fa.fa-angle-right.text-xs
                              |                             
                              span Blog
                          |                         
                          li
                            a.auto(href='invoice.html')
                              i.fa.fa-angle-right.text-xs
                              |                             
                              span Invoice
                          |                         
                          li
                            a.auto(href='gmap.html')
                              i.fa.fa-angle-right.text-xs
                              |                             
                              span Google Map
                          |                         
                          li
                            a.auto(href='jvectormap.html')
                              i.fa.fa-angle-right.text-xs
                              |                             
                              span Vector Map
                          |                         
                          li
                            a.auto(href='signin.html')
                              i.fa.fa-angle-right.text-xs
                              |                             
                              span Signin
                          |                         
                          li
                            a.auto(href='signup.html')
                              i.fa.fa-angle-right.text-xs
                              |                             
                              span Signup
                          |                         
                          li
                            a.auto(href='404.html')
                              i.fa.fa-angle-right.text-xs
                              |                             
                              span 404
                    |                   
                    ul.nav.text-sm
                      li.hidden-nav-xs.padder.m-t.m-b-sm.text-xs.text-muted
                        span.pull-right
                          a(href='#')
                            i.icon-plus.i-lg
                        |                       Playlist
                      |                     
                      li
                        a(href='#')
                          i.icon-music-tone.icon
                          |                         
                          span Hip-Pop
                      |                     
                      li
                        a(href='#')
                          i.icon-playlist.icon.text-success-lter
                          |                         
                          b.badge.bg-success.dker.pull-right 9
                          |                         
                          span Jazz
                  // / nav
              |             
              |             
              footer.footer.hidden-xs.no-padder.text-center-nav-xs
                .bg.hidden-xs
                  .dropdown.dropup.wrapper-sm.clearfix
                    a.dropdown-toggle(href='#', data-toggle='dropdown')
                      span.thumb-sm.avatar.pull-left.m-l-xs
                        img.dker(src='images/a3.png', alt='...')
                        |                         
                        i.on.b-black
                      |                       
                      span.hidden-nav-xs.clear
                        span.block.m-l
                          strong.font-bold.text-lt John.Smith
                          |  
                          |                           
                          b.caret
                        |                         
                        span.text-muted.text-xs.block.m-l Art Director
                    |                     
                    ul.dropdown-menu.animated.fadeInRight.aside.text-left
                      li
                        span.arrow.bottom.hidden-nav-xs
                        |                         
                        a(href='#') Settings
                      |                       
                      li
                        a(href='profile.html') Profile
                      |                       
                      li
                        a(href='#')
                          span.badge.bg-danger.pull-right 3
                          |                           Notifications
                      |                       
                      li
                        a(href='docs.html') Help
                      |                       
                      li.divider
                      |                       
                      li
                        a(href='modal.lockme.html', data-toggle='ajaxModal') Logout
          // /.aside
          section#content
            section.vbox
              section.scrollable
                section.hbox.stretch
                  aside.aside-lg.bg-light.lter.b-r
                    section.vbox
                      section.scrollable
                        .wrapper
                          .text-center.m-b.m-t
                            a.thumb-lg(href='#')
                              img.img-circle(src='images/a0.png')
                            |                           
                            div
                              .h3.m-t-xs.m-b-xs John.Smith
                              |                             
                              small.text-muted
                                i.fa.fa-map-marker
                                |  London, UK
                          |                         
                          .panel.wrapper
                            .row.text-center
                              .col-xs-6
                                a(href='#')
                                  span.m-b-xs.h4.block 245
                                  |                                 
                                  small.text-muted Followers
                              |                             
                              .col-xs-6
                                a(href='#')
                                  span.m-b-xs.h4.block 55
                                  |                                 
                                  small.text-muted Following
                          |                         
                          .btn-group.btn-group-justified.m-b
                            a.btn.btn-success.btn-rounded(data-toggle='button')
                              span.text
                                i.fa.fa-eye
                                |  Follow
                              |                             
                              span.text-active
                                i.fa.fa-eye
                                |  Following
                            |                           
                            a.btn.btn-dark.btn-rounded
                              i.fa.fa-comment-o
                              |  Chat
                          |                         
                          div
                            small.text-uc.text-xs.text-muted about me
                            |                           
                            p Artist
                            |                           
                            small.text-uc.text-xs.text-muted info
                            |                           
                            p
                              | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Aliquam sollicitudin venenatis ipsum ac feugiat.
                            |                           
                            .line
                            |                           
                            small.text-uc.text-xs.text-muted connection
                            |                           
                            p.m-t-sm
                              a.btn.btn-rounded.btn-twitter.btn-icon(href='#')
                                i.fa.fa-twitter
                              |                             
                              a.btn.btn-rounded.btn-facebook.btn-icon(href='#')
                                i.fa.fa-facebook
                              |                             
                              a.btn.btn-rounded.btn-gplus.btn-icon(href='#')
                                i.fa.fa-google-plus
                  |                 
                  aside.bg-white
                    section.vbox
                      header.header.bg-light.lt
                        ul.nav.nav-tabs.nav-white
                          li.active
                            a(href='#activity', data-toggle='tab') Activity
                          |                         
                          li
                            a(href='#events', data-toggle='tab') Events
                          |                         
                          li
                            a(href='#interaction', data-toggle='tab') Interaction
                      |                     
                      section.scrollable
                        .tab-content
                          #activity.tab-pane.active
                            ul.list-group.no-radius.m-b-none.m-t-n-xxs.list-group-lg.no-border
                              li.list-group-item
                                a.thumb-sm.pull-left.m-r-sm(href='#')
                                  img.img-circle(src='images/a0.png')
                                |                               
                                a.clear(href='#')
                                  small.pull-right 3 minuts ago
                                  |                                 
                                  strong.block Drew Wllon
                                  |                                 
                                  small Wellcome and play this web application template ... 
                              |                             
                              li.list-group-item
                                a.thumb-sm.pull-left.m-r-sm(href='#')
                                  img.img-circle(src='images/a1.png')
                                |                               
                                a.clear(href='#')
                                  small.pull-right 1 hour ago
                                  |                                 
                                  strong.block Jonathan George
                                  |                                 
                                  small Morbi nec nunc condimentum...
                              |                             
                              li.list-group-item
                                a.thumb-sm.pull-left.m-r-sm(href='#')
                                  img.img-circle(src='images/a2.png')
                                |                               
                                a.clear(href='#')
                                  small.pull-right 2 hours ago
                                  |                                 
                                  strong.block Josh Long
                                  |                                 
                                  small Vestibulum ullamcorper sodales nisi nec...
                              |                             
                              li.list-group-item
                                a.thumb-sm.pull-left.m-r-sm(href='#')
                                  img.img-circle(src='images/a3.png')
                                |                               
                                a.clear(href='#')
                                  small.pull-right 1 day ago
                                  |                                 
                                  strong.block Jack Dorsty
                                  |                                 
                                  small Morbi nec nunc condimentum...
                              |                             
                              li.list-group-item
                                a.thumb-sm.pull-left.m-r-sm(href='#')
                                  img.img-circle(src='images/a4.png')
                                |                               
                                a.clear(href='#')
                                  small.pull-right 3 days ago
                                  |                                 
                                  strong.block Morgen Kntooh
                                  |                                 
                                  small Mobile first web app for startup...
                              |                             
                              li.list-group-item
                                a.thumb-sm.pull-left.m-r-sm(href='#')
                                  img.img-circle(src='images/a5.png')
                                |                               
                                a.clear(href='#')
                                  small.pull-right Jun 21
                                  |                                 
                                  strong.block Yoha Omish
                                  |                                 
                                  small Morbi nec nunc condimentum...
                              |                             
                              li.list-group-item
                                a.thumb-sm.pull-left.m-r-sm(href='#')
                                  img.img-circle(src='images/a6.png')
                                |                               
                                a.clear(href='#')
                                  small.pull-right May 10
                                  |                                 
                                  strong.block Gole Lido
                                  |                                 
                                  small Vestibulum ullamcorper sodales nisi nec...
                              |                             
                              li.list-group-item
                                a.thumb-sm.pull-left.m-r-sm(href='#')
                                  img.img-circle(src='images/a7.png')
                                |                               
                                a.clear(href='#')
                                  small.pull-right Jan 2
                                  |                                 
                                  strong.block Jonthan Snow
                                  |                                 
                                  small Morbi nec nunc condimentum...
                              |                             
                              li.list-group-item(href='#email-content', data-toggle='class:show')
                                a.thumb-sm.pull-left.m-r-sm(href='#')
                                  img.img-circle(src='images/a8.png')
                                |                               
                                a.clear(href='#')
                                  small.pull-right 3 minuts ago
                                  |                                 
                                  strong.block Drew Wllon
                                  |                                 
                                  small Vestibulum ullamcorper sodales nisi nec sodales nisi nec sodales nisi nec...
                              |                             
                              li.list-group-item
                                a.thumb-sm.pull-left.m-r-sm(href='#')
                                  img.img-circle(src='images/a9.png')
                                |                               
                                a.clear(href='#')
                                  small.pull-right 1 hour ago
                                  |                                 
                                  strong.block Jonathan George
                                  |                                 
                                  small Morbi nec nunc condimentum...
                          |                         
                          #events.tab-pane
                            .text-center.wrapper
                              i.fa.fa-spinner.fa.fa-spin.fa.fa-large
                          |                         
                          #interaction.tab-pane
                            .text-center.wrapper
                              i.fa.fa-spinner.fa.fa-spin.fa.fa-large
                  |                 
                  aside.col-lg-3.b-l
                    section.vbox
                      section.scrollable.padder-v
                        .panel
                          h4.font-thin.padder Latest Tweets
                          |                         
                          ul.list-group
                            li.list-group-item
                              p
                                | Wellcome 
                                a.text-info(href='#') @Drew Wllon
                                |  and play this web application template, have fun1
                              |                               
                              small.block.text-muted
                                i.fa.fa-clock-o
                                |  2 minuts ago
                            |                           
                            li.list-group-item
                              p
                                | Morbi nec 
                                a.text-info(href='#') @Jonathan George
                                |  nunc condimentum ipsum dolor sit amet, consectetur
                              |                               
                              small.block.text-muted
                                i.fa.fa-clock-o
                                |  1 hour ago
                            |                           
                            li.list-group-item
                              p
                                a.text-info(href='#') @Josh Long
                                |  Vestibulum ullamcorper sodales nisi nec adipiscing elit. Morbi id neque quam. Aliquam sollicitudin venenatis
                              |                               
                              small.block.text-muted
                                i.fa.fa-clock-o
                                |  2 hours ago
                        |                       
                        .panel.clearfix
                          .panel-body
                            a.thumb.pull-left.m-r(href='#')
                              img.img-circle(src='images/a0.png')
                            |                           
                            .clear
                              a.text-info(href='#')
                                | @Mike Mcalidek 
                                i.fa.fa-twitter
                              |                             
                              small.block.text-muted 2,415 followers / 225 tweets
                              |                             
                              a.btn.btn-xs.btn-success.m-t-xs(href='#') Follow
            |           
            a.hide.nav-off-screen-block(href='#', data-toggle='class:nav-off-screen,open', data-target='#nav,html')
    |   
    script(src='js/jquery.min.js')
    // Bootstrap
    script(src='js/bootstrap.js')
    // App
    script(src='js/app.js')
    |   
    |   
    script(src='js/slimscroll/jquery.slimscroll.min.js')
    |   
    script(src='js/charts/easypiechart/jquery.easy-pie-chart.js')
    |   
    script(src='js/app.plugin.js')
    |   
    script(type='text/javascript', src='js/jPlayer/jquery.jplayer.min.js')
    |   
    script(type='text/javascript', src='js/jPlayer/add-on/jplayer.playlist.min.js')
    |   
    script(type='text/javascript', src='js/jPlayer/demo.js')
